<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球</title>
	</head>
	<body>
		<div id="app">
			<header>
				<h3>双色球管理系统</h3>
			</header>
			<main>
				<aside>
					<a href="upload.html" target="content">上传数据</a>
					<a href="query.html" target="content">查询数据</a>
					<hr style="width:90%">
					<a href="年度月份销量曲线图.html" target="content">年度月份销量曲线图</a>
					<a href="历年同月销量柱状图.html" target="content">历年同月销量柱状图</a>
					<a href="年度月份中奖数饼状图.html" target="content">年度月份中奖数饼状图</a>
					<hr style="width:90%">
					<a href="https://echarts.apache.org/examples/zh/index.html" target="content">ECharts 示例演示</a>
					<a href="https://echarts.apache.org/handbook/zh/get-started/" target="content">ECharts 快速上手</a>
				</aside>
				<iframe src="upload.html" name="content"></iframe>
			</main>
			<footer>
				源辰信息科技
			</footer>
		</div>
	</body>
</html>

<style>
	html,
	body {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	header {
		background-color: #ccc;
		flex: none;
		padding: 0px 20px;
		display: flex;
		justify-content: space-between;
	}

	footer {
		background-color: #ddd;
		flex: none;
		text-align: center;
		padding: 5px;
	}

	#app {
		width: 90%;
		height: 100%;
		margin: auto;
		display: flex;
		flex-direction: column;
	}

	main {
		background-color: #eee;
		flex: auto;
		display: flex;
		justify-content: space-between;
	}

	aside {
		background-color: #eed;
		width: 20%;
		flex: none;
		display: flex;
		flex-direction: column;
	}

	iframe {
		flex: auto;
		height: 100%;
		border: 0px;
	}

	aside>a {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0px auto;
		padding: 20px 0px;
	}

	aside>a:hover {
		background-color: #ddd;
	}
</style>
